ul,p{
    margin: 0;
    padding: 0;
}


li{
    list-style-type: none;
}


a{
    text-decoration: none;
}


.news_pic{
    position: relative;/*位置设为相对，本例的作用是使数字选项的位置位于图片之上，而不是浏览器右下角*/
    width: 500px;
    height: 339px;
    margin: 0 auto;/*居中对齐*/
    text-align: center;
    overflow: hidden;/*超出部分进行隐藏*/
}


.news_pic ul{
    width: 84px;
    height: 24px;
    position: absolute;
    right: 0;
    bottom: 24px;/*底部距离*/
}


.news_pic li{
    float: left;
    width: 20px;
    height: 24px;
    line-height: 24px;/*一行的情况下实现垂直居中*/
    text-align: center;
    border-left: #f7f7f7 1px solid;/*左边框属性设置*/
    background-color: #5a5a5a;/*背景颜色设置*/
}


.news_pic li:hover{
    background-color: #b7b7b7;/*光标颜色显示*/

}


.news_pic img{
    width: 500px;
    height: 315px;
    border-image: 0;/*跟图像边框有关的定义*/
}


.news_pic p{
    width: 500px;
    height: 24px;
    line-height: 24px;
    overflow: hidden;
}


.news_pic ul a{
    color: white;
}